<template>
  <div class="webchatProcessInfo" :class="processData.length === 0 ? 'noData' : ''">
    <el-timeline :reverse="false" v-if="processData.length > 0">
      <el-timeline-item
        v-for="(item, index) in processData"
        :key="index"
        placement="top"
        color="#008BEE"
        :timestamp="item.dateTime">
        {{item.processNodeName}}({{item.processNodeType | nodeType }})
      </el-timeline-item>
    </el-timeline>
    <div v-else class="noData">无数据</div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
@Component({
  name: 'webchatProcessInfo',
  filters: {
    nodeType (type: string) {
      if (type === 'im-node-start') {
        return '开始节点'
      } else if (type === 'im-node-date') {
        return '时间条件'
      } else if (type === 'im-node-menu') {
        return '引导菜单'
      } else if (type === 'im-node-transfer') {
        return '转人工'
      } else if (type === 'im-node-leave') {
        return '留言节点'
      } else if (type === 'im-node-robot') {
        return '机器人节点'
      } else if (type === 'im-node-branch') {
        return '分支路由节点'
      }
    }
  }
})
export default class WebchatProcessInfo extends Vue {
  @Prop() private processInfo

  get processData () {
    if (this.processInfo) {
      return this.processInfo.filter((item: any) => { // 过滤掉条件节点 不展示条件节点
        return item.type === 'node'
      })
    } else {
      return []
    }
  }
}
</script>
<style lang="stylus" scoped>
  .webchatProcessInfo
    height 200px
    overflow-y auto
    padding 0px 10px
  >>> .el-timeline-item__tail
    border-left 2px solid #008BEE
  .noData
    text-align center
    line-height 200px
</style>
